import React from 'react';
import { StyleSheet, View, Text, TouchableOpacity, Image, ScrollView } from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';
import { Ionicons } from '@expo/vector-icons';
import { useRouter } from 'expo-router';

const subjects = [
  { id: 1, name: '语文', icon: 'book' },
  { id: 2, name: '数学', icon: 'calculator' },
  { id: 3, name: '英语', icon: 'language' },
  { id: 4, name: '物理', icon: 'flask' },
  { id: 5, name: '化学', icon: 'beaker' },
  { id: 6, name: '生物', icon: 'leaf' },
];

export default function HomeScreen() {
  const router = useRouter();

  return (
    <SafeAreaView style={styles.container}>
      <ScrollView>
        {/* 搜索框 */}
        <View style={styles.searchContainer}>
          <TouchableOpacity style={styles.searchBox}>
            <Ionicons name="search" size={20} color="#999" />
            <Text style={styles.searchText}>搜索题目、知识点</Text>
          </TouchableOpacity>
          <TouchableOpacity style={styles.cameraButton}>
            <Ionicons name="camera" size={24} color="#fff" />
          </TouchableOpacity>
        </View>

        {/* 学科分类 */}
        <View style={styles.subjectsContainer}>
          <Text style={styles.sectionTitle}>学科分类</Text>
          <View style={styles.subjectsGrid}>
            {subjects.map((subject) => (
              <TouchableOpacity key={subject.id} style={styles.subjectItem}>
                <Ionicons name={subject.icon} size={30} color="#1890ff" />
                <Text style={styles.subjectName}>{subject.name}</Text>
              </TouchableOpacity>
            ))}
          </View>
        </View>

        {/* 热门题目 */}
        <View style={styles.hotQuestionsContainer}>
          <Text style={styles.sectionTitle}>热门题目</Text>
          <View style={styles.questionList}>
            {[1, 2, 3].map((item) => (
              <TouchableOpacity key={item} style={styles.questionItem}>
                <Text style={styles.questionText}>
                  已知函数f(x) = x^2 + 2x + 1，求f(x)的最小值
                </Text>
                <View style={styles.questionMeta}>
                  <Text style={styles.questionSubject}>数学</Text>
                  <Text style={styles.questionViews}>1.2w人查看</Text>
                </View>
              </TouchableOpacity>
            ))}
          </View>
        </View>
      </ScrollView>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#f5f5f5',
  },
  searchContainer: {
    flexDirection: 'row',
    padding: 15,
    alignItems: 'center',
  },
  searchBox: {
    flex: 1,
    flexDirection: 'row',
    alignItems: 'center',
    backgroundColor: '#fff',
    borderRadius: 20,
    paddingHorizontal: 15,
    height: 40,
    marginRight: 10,
  },
  searchText: {
    marginLeft: 10,
    color: '#999',
  },
  cameraButton: {
    width: 40,
    height: 40,
    borderRadius: 20,
    backgroundColor: '#1890ff',
    justifyContent: 'center',
    alignItems: 'center',
  },
  subjectsContainer: {
    padding: 15,
    backgroundColor: '#fff',
    marginTop: 10,
  },
  sectionTitle: {
    fontSize: 18,
    fontWeight: 'bold',
    marginBottom: 15,
  },
  subjectsGrid: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    justifyContent: 'space-between',
  },
  subjectItem: {
    width: '30%',
    alignItems: 'center',
    marginBottom: 20,
  },
  subjectName: {
    marginTop: 8,
    fontSize: 14,
  },
  hotQuestionsContainer: {
    padding: 15,
    backgroundColor: '#fff',
    marginTop: 10,
  },
  questionList: {
    marginTop: 10,
  },
  questionItem: {
    padding: 15,
    borderBottomWidth: 1,
    borderBottomColor: '#f0f0f0',
  },
  questionText: {
    fontSize: 16,
    lineHeight: 24,
  },
  questionMeta: {
    flexDirection: 'row',
    marginTop: 10,
    alignItems: 'center',
  },
  questionSubject: {
    color: '#1890ff',
    marginRight: 15,
  },
  questionViews: {
    color: '#999',
  },
});
